<template>
	<view class="rechage-page">
		<input type="number" v-model="rechage"  placeholder="请输入其它金额" />
		<view class="btn-list">
			<view class="d-flex justify-center align-items-center btn" @click="changeAmount(100)"><text>100</text><text>元</text></view>
			<view class="d-flex justify-center align-items-center btn" @click="changeAmount(200)"><text>200</text><text>元</text></view>
			<view class="d-flex justify-center align-items-center btn" @click="changeAmount(500)" ><text>500</text><text>元</text></view>
			<view class="d-flex justify-center align-items-center btn" @click="changeAmount(1000)"><text>1000</text><text>元</text></view>
			<view class="d-flex justify-center align-items-center btn" @click="changeAmount(2000)"><text>2000</text><text>元</text></view>
			<view class="d-flex justify-center align-items-center btn" @click="changeAmount(0.01)"><text>0.01</text><text>元</text></view>
		</view>
		
		<view class="pay-type-list">
			<view class="type-item b-b" @click="changePayType(1)">
				<text class="icon yticon icon-weixinzhifu"></text>
				<view class="con">
					<text class="tit">微信支付</text>
				</view>
				<label class="radio"><radio value="" color="#fa436a" :checked="payType == 1" /></label>
			</view>
			<!-- #ifdef APP-PLUS -->
			<view class="type-item b-b" @click="changePayType(2)">
				<text class="icon yticon icon-alipay"></text>
				<view class="con"><text class="tit">支付宝支付</text></view>
				<label class="radio"><radio value="" color="#fa436a" :checked="payType == 2" /></label>
			</view>
			<!-- #endif -->
		</view>
		<!-- #ifdef APP-PLUS -->
		<button type="primary" class="submit-btn" @click="confirm">确认充值</button>
		<!-- #endif -->
		
		<!-- #ifdef H5 -->
		<button type="primary" class="submit-btn" @click="wxH5pay">确认充值</button>
		<!-- #endif -->
		
		<!-- #ifdef MP-WEIXIN -->
		<button type="primary" class="submit-btn" @click="wxxcxpay">确认充值</button>
		<!-- #endif -->
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { isEmptyObj,inWechat } from '../../utils/index.js';
export default {
	data() {
		return {
			rechage: 0,
			payType: 1,
		};
	},
	computed: {
		...mapState('user',['token']),
	},
	onShow() {
		if(!this.token){
			return uni.navigateTo({
				url:'/pages/public/login'
			})
		}
	},
	methods:{
		changeAmount(amount){
			this.rechage= amount;
		},
		changePayType(type) {
			this.payType = type;
		},
		createOrder(callback){
			let params={
				token:this.token,
				money:this.rechage
			}
			this.$ajax.get('member/recharge',params).then(data=>{
				if(0==data.error){
					let p={
						token:this.token,
						order_no: data.data.pay_order_no,
						pay_total:this.rechage,
						subject: data.data.subject,
						body:'recharge'
					}
					//支付
					callback(p);
				}
			})
		},
		//#ifdef H5
		wxH5pay(){
			if(0==inWechat()){
				this.$api.msg('不能支付,请用微信打开此网站');
				return false;
			}
			if(this.rechage<=0){
				this.$api.msg('充值金额必须大于0');
				return false;
			}
			let that=this;
			this.createOrder(function(res){
				that.$ajax.get('wechat/h5pay',res).then(data=>{
					if(!isEmptyObj(data)){
						const wx = require('jweixin-module');
						wx.config({
							debug: false, 
							appId:data.appId,            //必填，公众号的唯一标识
							timestamp:data.timestamp,   // 必填，生成签名的时间戳
							nonceStr:data.nonceStr,    // 必填，生成签名的随机串
							signature:data.signature,
							jsApiList: ['chooseWXPay'] ,
						}),
						wx.ready(function() {
							wx.chooseWXPay({
								timestamp:data.timestamp,
								nonceStr:data.nonceStr, 
								package:data.package, 
								signType: data.signType, //md5
								paySign: data.paySign, 
								success(res) {
									uni.switchTab({
										url:'/pages/user/user'
									})
								},
								fail(res) {
									that.$api.msg('支付失败,请重新支付');
								}
							});
						});
						wx.error(function(res) {
							console.log('验证失败'+res);
						});
					}
				})
			})
			
		},
		//#endif
		//#ifdef MP-WEIXIN
		wxxcxpay(){
			if(this.rechage<=0){
				this.$api.msg('充值金额必须大于0');
				return false;
			}
			let that=this;
			this.createOrder(function(params){
				uni.login({
					provider: 'weixin',
					success: res => {
						that.$ajax.get('wechat/getxcxopenid',{token:that.token,code:res.code}).then(data=>{
							console.log(data);
							if(!data){
								return that.$toast('支付错误');
							}
							//发起支付
							params.openId = data;
							that.$ajax.get('wechat/xcxpay',params).then(data=>{
								if('error'!=data){
									uni.requestPayment({
										provider:"wxpay",
										timeStamp: data.timeStamp,
										nonceStr: data.nonceStr,
										package: data.package,
										signType: data.signType,
										paySign: data.paySign,
										success:function(res){
											uni.showToast({
											title:"支付成功",
											icon:"success",
											duration:2000,
											complete:function(){
												uni.switchTab({
													url:'/pages/user/user'
												})
											}
											});
										},
										fail:function(res){
											uni.showToast({
												title: '支付失败，请重新支付',
												icon: "none",
												duration: 1000,
												
											});
										}
									});
								}else{
									return that.$toast('支付错误');
								}
							})
							
						})
					},
				})
			})
		},
		//#endif
		
		//#ifdef APP-PLUS
		confirm(){
			if(this.rechage<=0){
				this.$api.msg('充值金额必须大于0');
				return false;
			}
			let that=this;
			this.createOrder(function(res){
				this.loading =true;
				if(1==that.payType){ //微信支付
					that.$ajax.get('pay/wxpay',res).then(data=>{			
						console.log(data);
						if(data){
							uni.requestPayment({
								provider:"wxpay",
								orderInfo:data,
								success:function(res){
									uni.showToast({
									title:"支付成功",
									icon:"success",
									duration:1000,
									complete:function(){
										uni.switchTab({
											url:'/pages/user/user'
										})
									}
									});
								},
								fail:function(res){
									that.$api.msg('支付失败');
								}
							});
						}
					})
				}
				if(2==that.payType){ //支付宝支付
					//与支付
					that.$ajax.get('pay/alipay',res).then(data=>{
						console.log(data);
						if(data){
							uni.requestPayment({
								provider:"alipay",
								orderInfo:data,
								success:function(res){
									uni.showToast({
									title:"支付成功",
									icon:"success",
									duration:1000,
									complete:function(){
										uni.switchTab({
											url:'/pages/user/user'
										})
									}
									});
								},
								fail:function(res){
									that.$api.msg('支付失败');
								}
							});
						}
					})
				}
			})
		}
		//#endif
		
	}
};
</script>

<style lang="scss">
page {
	background-color: $page-color-base;
}
.rechage-page {
	margin: 30rpx;
	background-color: #ffffff;
	padding: 30rpx;
	border-radius: 10rpx;
	box-shadow: 0 6rpx 20rpx -8rpx rgba($color: #000000, $alpha: .1);
	input {
		border-bottom: 5rpx solid #606266;
		padding: 20rpx;
		box-sizing: content-box;
		margin-bottom: 20rpx;
	}
	.btn-list {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-row-gap: 20rpx;
		grid-column-gap: 20rpx;
		.btn {
			height: 100rpx;
			border: 1px solid #000000;
			color: #000000;
		}
	}
	.submit-btn {
		margin-top: 40rpx;
	}
}

.pay-type-list {
	margin-top: 20upx;
	background-color: #fff;
	padding-left: 60upx;

	.type-item {
		height: 120upx;
		padding: 20upx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 60upx;
		font-size: 30upx;
		position: relative;
	}

	.icon {
		width: 100upx;
		font-size: 52upx;
	}
	.icon-erjiye-yucunkuan {
		color: #fe8e2e;
	}
	.icon-weixinzhifu {
		color: #36cb59;
	}
	.icon-alipay {
		color: #01aaef;
	}
	.tit {
		font-size: $font-lg;
		color: $font-color-dark;
		margin-bottom: 4upx;
	}
	.con {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: $font-sm;
		color: $font-color-light;
	}
}
</style>
